<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <uni-icons type="left" size="24" color="#fff" class="back-icon" @click="handleBack"></uni-icons>
      <text class="nav-title">报告查询中心</text>
    </view>

    <!-- 主体内容：等距布局的报告查询模块 -->
    <view class="main-content">
      <!-- 左侧：筛选与搜索区 -->
      <view class="module left-module">
        <text class="module-title">查询筛选</text>
        
        <!-- 搜索框 -->
        <view class="search-box">
          <uni-icons type="search" size="18" color="#888" class="search-icon"></uni-icons>
          <input 
            class="search-input" 
            placeholder="输入报告名称/编号搜索" 
            v-model="searchKey"
            @input="handleSearch"
          >
        </view>

        <!-- 报告类型筛选 -->
        <view class="filter-section">
          <text class="filter-title">报告类型</text>
          <view class="filter-tags">
            <view 
              class="filter-tag" 
              :class="{ active: activeType === 'all' }"
              @click="setActiveType('all')"
            >
              全部
            </view>
            <view 
              class="filter-tag" 
              :class="{ active: activeType === 'physical' }"
              @click="setActiveType('physical')"
            >
              体检报告
            </view>
            <view 
              class="filter-tag" 
              :class="{ active: activeType === 'test' }"
              @click="setActiveType('test')"
            >
              检验报告
            </view>
            <view 
              class="filter-tag" 
              :class="{ active: activeType === 'imaging' }"
              @click="setActiveType('imaging')"
            >
              影像报告
            </view>
          </view>
        </view>

        <!-- 时间筛选 -->
        <!-- <view class="filter-section">
          <text class="filter-title">时间范围</text>
          <view class="date-picker-box">
            <uni-date-picker 
              type="daterange" 
              placeholder="选择时间范围"
              v-model="dateRange"
              @change="handleDateChange"
            ></uni-date-picker>
          </view>
        </view -->>

        <!-- 状态筛选 -->
        <!-- <view class="filter-section">
          <text class="filter-title">报告状态</text>
          <view class="status-select">
            <uni-select 
              v-model="activeStatus" 
              :options="statusOptions"
              @change="handleStatusChange"
            ></uni-select>
          </view>
        </view> -->
      </view>

      <!-- 中间：报告列表区 -->
      <view class="module center-module">
        <text class="module-title">我的报告</text>
        
        <!-- 报告列表 -->
        <view class="report-list">
          <view 
            class="report-item" 
            v-for="(report, index) in filteredReports" 
            :key="index"
            @click="viewReportDetail(report)"
          >
            <view class="report-header">
              <text class="report-title">{{ report.title }}</text>
              <text class="report-status" :class="getStatusCode(report.status)">{{ report.status }}</text>
            </view>
            <view class="report-info">
              <text class="info-item">类型：{{ report.typeText }}</text>
              <text class="info-item">生成时间：{{ report.createTime }}</text>
              <text class="info-item">机构：{{ report.orgName }}</text>
            </view>
            <view class="report-actions">
              <view class="action-btn preview-btn" @click.stop="previewReport(report)">预览</view>
              <view class="action-btn download-btn" @click.stop="downloadReport(report)">下载</view>
            </view>
          </view>
        </view>

        <!-- 空状态提示 -->
        <view class="empty-tip" v-if="filteredReports.length === 0">
          <uni-icons type="file-empty" size="48" color="#ccc"></uni-icons>
          <text class="empty-text">暂无符合条件的报告</text>
        </view>
      </view>

      <!-- 右侧：报告统计与服务区 -->
      <view class="module right-module">
        <text class="module-title">报告统计</text>
        
        <!-- 报告数量统计 -->
        <view class="stats-card">
          <view class="stat-item">
            <text class="stat-value">{{ totalReports }}</text>
            <text class="stat-label">总报告数</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ unreadReports }}</text>
            <text class="stat-label">未读报告</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ physicalReports }}</text>
            <text class="stat-label">体检报告</text>
          </view>
        </view>

        <!-- 最近查看 -->
        <view class="recent-view-section">
          <text class="section-title">最近查看</text>
          <view class="recent-list">
            <view 
              class="recent-item" 
              v-for="(item, index) in recentViews" 
              :key="index"
              @click="viewReportDetail(item)"
            >
              <text class="recent-title">{{ item.title }}</text>
              <text class="recent-time">{{ item.viewTime }}</text>
            </view>
          </view>
        </view>

        <!-- 报告服务 -->
        <view class="service-section">
          <text class="section-title">报告服务</text>
          <view class="service-btn" @click="applyReportAnalysis">
            <uni-icons type="line-chart" size="18" color="#fff" class="service-icon"></uni-icons>
            <text class="service-text">报告解读分析</text>
          </view>
          <view class="service-btn" @click="submitReportFeedback">
            <uni-icons type="chatbubble" size="18" color="#fff" class="service-icon"></uni-icons>
            <text class="service-text">提交报告反馈</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 导航返回
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 搜索关键词
const searchKey = ref('');
// 报告类型筛选
const activeType = ref('all');
// 时间范围筛选
const dateRange = ref(['', '']);
// 状态筛选
const activeStatus = ref('all');
const statusOptions = ref([
  { value: 'all', text: '全部状态' },
  { value: 'completed', text: '已完成' },
  { value: 'pending', text: '待生成' },
  { value: 'expired', text: '已过期' }
]);

// 原始报告数据
const reportDatas = ref([
  {
    id: 1,
    title: '2024年度体检报告',
    type: 'physical',
    typeText: '体检报告',
    status: '已完成',
    createTime: '2024-03-15',
    orgName: '市中心医院体检中心',
    viewTime: '2024-03-16 14:20'
  },
  {
    id: 2,
    title: '血常规检验报告',
    type: 'test',
    typeText: '检验报告',
    status: '已完成',
    createTime: '2024-02-20',
    orgName: '第一人民医院检验科',
    viewTime: '2024-02-21 09:15'
  },
  {
    id: 3,
    title: '胸部CT影像报告',
    type: 'imaging',
    typeText: '影像报告',
    status: '已完成',
    createTime: '2024-01-10',
    orgName: '第二人民医院影像科',
    viewTime: '2024-01-11 16:30'
  },
  {
    id: 4,
    title: '2023年度体检报告',
    type: 'physical',
    typeText: '体检报告',
    status: '已完成',
    createTime: '2023-12-05',
    orgName: '市中心医院体检中心',
    viewTime: '2023-12-06 11:45'
  }
]);

// 最近查看列表
const recentViews = ref(reportDatas.value.slice(0, 2));

// 筛选后的报告
const filteredReports = computed(() => {
  return reportDatas.value.filter(report => {
    // 类型筛选
    if (activeType.value !== 'all' && report.type !== activeType.value) return false;
    // 状态筛选
    if (activeStatus.value !== 'all' && report.status !== activeStatus.value) return false;
    // 搜索筛选
    if (searchKey.value && !report.title.includes(searchKey.value) && !report.orgName.includes(searchKey.value)) return false;
    // 时间筛选
    if (dateRange.value[0] && new Date(report.createTime) < new Date(dateRange.value[0])) return false;
    if (dateRange.value[1] && new Date(report.createTime) > new Date(dateRange.value[1])) return false;
    return true;
  });
});

// 报告统计数据
const totalReports = computed(() => reportDatas.value.length);
const unreadReports = computed(() => reportDatas.value.filter(r => r.status === '已完成').length);
const physicalReports = computed(() => reportDatas.value.filter(r => r.type === 'physical').length);

// 筛选事件处理
const handleSearch = () => {};
const setActiveType = (type) => { activeType.value = type; };
const handleDateChange = (e) => { dateRange.value = e.detail.value; };
const handleStatusChange = (e) => { activeStatus.value = e.detail.value; };

// 报告状态样式
const getStatusCode = (status) => {
  switch (status) {
    case '已完成': return 'status-completed';
    case '待生成': return 'status-pending';
    case '已过期': return 'status-expired';
    default: return '';
  }
};

// 报告操作事件
const viewReportDetail = (report) => {
  uni.showToast({ title: `查看《${report.title}》详情`, icon: 'none' });
};
const previewReport = (report) => {
  uni.showToast({ title: `预览《${report.title}》`, icon: 'none' });
};
const downloadReport = (report) => {
  uni.showToast({ title: `下载《${report.title}》中...`, icon: 'none' });
};

// 服务操作事件
const applyReportAnalysis = () => {
  uni.showToast({ title: '申请报告解读分析', icon: 'none' });
};
const submitReportFeedback = () => {
  uni.showToast({ title: '提交报告反馈', icon: 'none' });
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.back-icon {
  cursor: pointer;
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* 主体内容布局 */
.main-content {
  display: block;
  justify-content: space-between;
  gap: 20px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 15px;
  display: block;
}

/* 左侧：筛选与搜索区 */
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 20px;
}

.search-icon {
  margin-right: 10px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tag {
  padding: 6px 12px;
  background-color: #f5f7fa;
  border-radius: 20px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tag.active {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

.date-picker-box, .status-select {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 0 15px;
}

/* 中间：报告列表区 */
.report-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.report-item {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.report-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(107, 127, 215, 0.1);
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.report-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.report-status {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
}

.status-completed {
  background-color: #e6f7ef;
  color: #45b787;
}

.status-pending {
  background-color: #fff3e0;
  color: #f59a23;
}

.status-expired {
  background-color: #fef2f2;
  color: #e74c3c;
}

.report-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 12px;
  color: #666;
}

.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-btn {
  background-color: #ffffff;
  color: #6b7fd7;
  border: 1px solid #6b7fd7;
}

.download-btn {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #ccc;
}

.empty-text {
  margin-top: 15px;
  font-size: 14px;
}

/* 右侧：报告统计与服务区 */
.stats-card {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.recent-view-section, .service-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-item {
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recent-item:hover {
  background-color: #e6eaf5;
}

.recent-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 3px;
  display: block;
}

.recent-time {
  font-size: 12px;
  color: #999;
}

.service-btn {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.service-icon {
  margin-right: 10px;
}

.service-text {
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
}
</style>